// pages/cart/cart.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    // 用户收货地址信息
    address: {},
    // 购物车数据源头
    cart: [],
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {

  },
  // 页面打开时触发
  onShow () {
    // 1 获取缓存中的收货地址信息
    const address = wx.getStorageSync("address");
    // 1 获取缓存中的购物车数据，没有数据就设置为空数组
    // 用于获取购物车数据后判断其中所有商品的复选框状态，判断是否设置全选、总价的计算
    const cart = wx.getStorageSync("cart") || [];
    // 将从storage中获取到的拼接的地址，存给data中，用于wxml页面中调用
    this.setData({ address });
    // 调用重计算方法，传入从storage中获取的购物车数据缓存，用于重新计算购物车中的全选、总价等信息
    this.setCart(cart);

  },
  // 点击 增加收货地址按钮触发的方法
  handleChooseAddress () {
    // 微信内置API==>获取用户的收获地址方法
    wx.chooseAddress({
      success: (res) => {
        console.log(res);
        let address = res
        // 拼接获取的用户地址的详细地址信息成一条str，方便使用
        address.all = res.provinceName + res.cityName + res.countyName + res.detailInfo;
        // 5 存入到缓存中
        wx.setStorageSync("address", address);
      },
      fail: () => { },
      complete: () => { }
    });
  },
  // 商品的选中
  handeItemChange (e) {
    // 1 获取被修改的商品的id
    const goods_id = e.currentTarget.dataset.id;
    // 2 获取data中存储的购物车数组，生成一个临时变量，用于循环，防止污染data中的数据 
    let { cart } = this.data;
    // 3 循环找到传进来的商品id的商品对应在cart数组中的位置
    let index = cart.findIndex(v => v.goods_id === goods_id);
    // 4 根据找到的index位置，将选中状态取反，表示用户不勾选该购物车商品
    cart[index].checked = !cart[index].checked;
    // 调用方法，传入修改选中状态后的cart数组，用来重新设置并计算购物车中的 复选框状态、总价格等信息
    this.setCart(cart);

  },
  // 设置购物车状态同时 重新计算 底部工具栏的数据 全选 总价格 购买的数量
  setCart (cart) {
    // 默认设置购物车底部操作栏中的全选框为勾选，在底下在判断是否要设为false
    let allChecked = true;
    // 1 购物车总价格、总数量
    let totalPrice = 0;
    let totalNum = 0;
    // 循环购物车数据数组
    cart.forEach(v => {
      // 如果购物车数据中的选中状态为true，表示用户勾选该商品
      if (v.checked) {
        // 计算价格，统加到总价中去
        totalPrice += v.num * v.goods_price;
        // 计算右侧括号中的商品数量也统加上去
        totalNum += v.num;
      } else { //如果购物车数据中有一个数据的选中状态不是true，那就不能设置全选
        allChecked = false;
      }
    })
    /**
     * 全选框有个问题：如果cart数组是个空数组，那么就不会进入forEach循环，那么默认全选框就是选中效果
     * 所以：需要判断一下，如果购物车数组的长度为0，那就表示没有数据，那么就设置全选框为false，有数据那就还是设置为本来的值，不冲突
     */
    allChecked = cart.length != 0 ? allChecked : false;
    // 计算完总价、总数量、全选框状态，就可以将修改后的数据保存到data中，用于页面渲染了
    this.setData({
      cart,
      totalPrice, totalNum, allChecked
    });
    // 将购物车数据存入storage中，用于页面再次打开时的数据源
    wx.setStorageSync("cart", cart);
  },
  // 底部结算栏目的全选框 点击功能触发方法
  handleItemAllCheck () {
    // 1 获取data中的数据，声明临时变量，防止污染源数据
    let { cart, allChecked } = this.data;
    // 2 取反全选框状态
    allChecked = !allChecked;
    // 3 循环修改cart数组 中的商品选中状态  如果当前全选状态为true，表示每一个商品都是选中状态
    //  如果用户点击全选框设置为false，那么就同步清空所有商品的选中状态，将数组中每一项的选中状态都设置为false，也就是全选框的状态
    cart.forEach(v => v.checked = allChecked);
    // 4 把修改后的值 填充回data或者缓存中
    this.setCart(cart);
  },
  // 商品数量的编辑功能
  handleItemNumEdit (e) {
    // 1 获取传递过来的参数 点击的操作符是 + 还是 -    点击的商品id
    const { operation, id } = e.currentTarget.dataset;
    // 2 获取购物车数组，防止污染源数据
    let { cart } = this.data;
    // 3 通过findIndex方法，找到数组中需要修改的商品的索引
    const index = cart.findIndex(v => v.goods_id === id);
    // 4 判断是否要执行删除 当点击的方法为减少数量，并且当前商品数量为1（再减少就为0了，要问用户是否把该商品从购物车中移除了）
    if (cart[index].num === 1 && operation === -1) {
      // 4.1 弹窗提示用户是否要移除该商品
      wx.showModal({
        title: '提示',
        content: '您是否要删除？',
        showCancel: true,
        cancelText: '取消',
        cancelColor: '#000000',
        confirmText: '确定',
        confirmColor: '#3CC51F',
        success: (res) => {
          if (res.confirm) {
            // 删除购物车数据数组中的这个元素
            cart.splice(index, 1);
            // 同时调用更新数据的方法
            this.setCart(cart);
          }
        },
        fail: () => { },
        complete: () => { }
      });

    }
    //数量还没归零，可以继续增减操作
    else {
      // 4  进行修改数量   operation传进来的是 1 或者 -1  表示增加1个或减少1个
      cart[index].num += operation;
      // 5 设置底部结算栏中的数据，并且缓存回storage和data中，用于页面的展示
      this.setCart(cart);
    }
  },
  // 点击 结算按钮 触发方法 
  handlePay () {
    // 1 判断收货地址、结算商品数量
    const { address, totalNum } = this.data;
    // 如果没有选择地址，弹窗提示
    if (!address.userName) {
      wx.showToast({
        icon: 'none',
        title: '您还没有选择收货地址',
      });
      return;
    }
    // 2 判断用户有没有选购商品
    if (totalNum === 0) {
      wx.showToast({
        icon: 'none',
        title: '您还没有选购商品',
      });
      return;
    }
    // 3 满足上述条件，有地址，有选择商品，就跳转到 支付页面
    wx.navigateTo({
      url: '/pages/pay/pay'
    });

  }
})